<template>
  <div class="content">
    <div id="left"></div>
    <div id="container"></div>
  </div>
</template>

<script lang="ts" setup>
import { defineComponent, onMounted } from "vue";
import { AntVData } from "./index";

const AntVDataFn = AntVData();

defineComponent({
  name: "AntV",
  props: {
    msg: String,
  },
});

onMounted(() => {
  const leftEl = document.getElementById("left");
  const containerEl = document.getElementById("container");
  AntVDataFn.initGraph(containerEl as HTMLElement, leftEl as HTMLElement);
});
</script>

<style scoped lang="less">
.content {
  display: flex;
  width: 100%;
  height: 1000px;
  text-align: left;

  #left {
    position: relative;
    width: 200px;
    overflow: hidden;
  }
  #container {
    flex: 1;
    height: 100%;
  }
}
</style>
